<script>
import { ref, h } from 'vue'
import { ElMessage } from 'element-plus'

export default {
    setup() {
        const list = [
            { name: '吕布', age: 36, gender: '男' },
            { name: '貂蝉', age: 28, gender: '女' },
            { name: '曹操', age: 40, gender: '男' },
            { name: '刘备', age: 35, gender: '男' },
            { name: '孙权', age: 30, gender: '男' },
        ];
        const handleClick = (item) => {
            ElMessage({
                message:`您点击的是${item.name}`,
                type: 'success'
            })
        };

        return () => h('div', list.map(
            (item) => h('div', { onClick: () => handleClick(item) }, `${item.name}今年${item.age}岁，${item.gender}`)
        ))
    }
}
</script>

<style lang="less" scoped>
.none {
    display: none;
}
</style>